let code = {}
code.drag = `
<template>
  <Table
    size="small"
    ref="table1"
    :data="data1"
    :columns="cols1"
    highlight-row
    stripe
    draggable
    @on-select="table1Select"
    @on-drag-drop="table1DragDrop"
    @on-select-all="table1selectAll"
    @on-selection-change="table1selectChange"
    @on-current-change="table1currentChange"
    :loading="loading"
    :max-height="600"
    border >
    <div slot="loading">
      <Spin>
<!--              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>-->
<!--              <div>Loading</div>-->
        <div class="loader">
          <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
          </svg>
        </div>
      </Spin>
    </div>
<!--          <div slot="header">-->
<!--            <center>Drag and Drop</center>-->
<!--          </div>-->
<!--          <div slot="footer">-->
<!--            <center>2020-07-21</center>-->
<!--          </div>-->
  </Table>
  <div>
    <Button type="info" @click="exportData(1)">
      <Icon type="ios-download-outline"></Icon>导出表格数据
    </Button>
    <Button type="default" @click="checkAll(1, true)">设置全选</Button>
    <Button type="default" @click="checkAll(1, false)">取消全选</Button>
    <i-switch size="large" v-model="loading">
      <span slot="open">ON</span>
      <span slot="close">OFF</span>
    </i-switch>
  </div>
</template>
<script>
export default {
  name: 'test',
  components: {
    ExampleCode
  },
  data () {
    return {
      loading: true,
      levels: [
        [0, 0, 0, 0, 0, 0],
        [2498, 0, 204, 0, 34, 0],
        [2561, 63, 209, 5, 35, 1],
        [2626, 65, 214, 5, 36, 1],
        [2692, 66, 220, 6, 37, 1],
        [2759, 67, 225, 5, 38, 1],
        [2827, 68, 231, 6, 39, 1],
        [2897, 70, 237, 6, 40, 1],
        [2967, 70, 242, 5, 41, 1],
        [3039, 72, 248, 6, 42, 1],
        [3318, 279, 271, 23, 46, 4],
        [3392, 74, 277, 6, 47, 1],
        [3467, 75, 283, 6, 48, 1],
        [3544, 77, 289, 6, 49, 1],
        [3622, 78, 296, 7, 50, 1],
        [3701, 79, 302, 6, 51, 1],
        [3782, 81, 309, 7, 52, 1],
        [3864, 82, 316, 7, 53, 1],
        [3948, 84, 323, 7, 55, 2],
        [4033, 85, 329, 6, 56, 1],
        [4786, 753, 391, 62, 66, 10],
      ],
      cols1: [
        { type: 'selection', width: 50, align: 'center', fixed: 'left' },
        { title: '等级', width: 100, key: 'lvl' },
        { title: '生命', width: 100, key: 'life' },
        { title: '攻击', width: 100, key: 'attack' },
        { title: '防御', width: 100, key: 'defence' },
        { title: '生命增幅', width: 100, key: 'life_inc' },
        { title: '攻击增幅', width: 100, key: 'atk_inc' },
        { title: '防御增幅', width: 100, key: 'def_inc' },
        {
          title: '操作',
          key: 'act',
          width: 160,
          fixed: 'right',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.info('in coming')
                  }
                }
              }, [
                h('Icon', {
                  props: {
                    type: 'md-help-circle'
                  }
                }),
                'Info'
              ]),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small',
                  icon: 'md-trash'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.error('in coming')
                  }
                }
              }, 'Del')
            ])
          }
        }
      ],
      cols2: [
        { type: 'selection', width: 50, align: 'center', fixed: 'left' },
        { title: '等级', width: 100, key: 'lvl' },
        { title: '生命', width: 100, key: 'life' },
        { title: '攻击', width: 100, key: 'attack' },
        { title: '防御', width: 100, key: 'defence' },
        { title: '生命增幅', width: 100, key: 'life_inc' },
        { title: '攻击增幅', width: 100, key: 'atk_inc' },
        { title: '防御增幅', width: 100, key: 'def_inc' },
        {
          title: '操作',
          key: 'act',
          width: 160,
          fixed: 'right',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.info('in coming')
                  }
                }
              }, [
                h('Icon', {
                  props: {
                    type: 'md-help-circle'
                  }
                }),
                'Info'
              ]),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small',
                  icon: 'md-trash'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.error('in coming')
                  }
                }
              }, 'Del')
            ])
          }
        }
      ],
    }
  },
  computed: {
    dataOrigin () {
      let rows = this.levels.slice()
      let ret = []
      for (let [idx, row] of rows.entries()) {
        ret.push({
          lvl: idx + 1,
          life: row[0],
          attack: row[2],
          defence: row[4],
          life_inc: row[1],
          atk_inc: row[3],
          def_inc: row[5]
        })
      }
      return ret
    },
    data1 () {
      return this.dataOrigin.slice(0, 20)
    }
  },
  methods: {
    exportData (id) {
      if (id === 1) {
        this.$refs.table1.exportCsv({
          filename: '拖拽Drag&Drop表格'
        })
      }
    },
    checkAll (id, status) {
      this.$refs['table' + id].selectAll(status)
    },
    table1Select (selected, current) {
      // all selected rows , current selected row
      console.log(selected, current)
    },
    table1selectAll (list) {
      // all row
      console.log(list)
    },
    table1selectChange (selected) {
      // current selected rows
      console.log(selected)
    },
    /**
     * @param drag index
     * @param drop index
     */
    table1DragDrop (drag, drop) {
      let item = this.levels.splice(drag, 1)
      this.levels.splice(drop, 0, item[0])
    },
    table1currentChange (curr, prev) {
      console.log(curr, prev)
    }
  }
}
</script>
`
code.expand = `
<template>
  <Table
    size="small"
    ref="table2"
    :data="data2"
    :columns="cols2"
    highlight-row
    stripe
    :max-height="360"
    :row-class-name="rowClassName"
    border >
    <div slot="loading">
      <Spin>
        <!--              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>-->
        <!--              <div>Loading</div>-->
        <div class="loader">
          <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
          </svg>
        </div>
      </Spin>
    </div>
    <div slot-scope="{row,index}" slot="expand">

    </div>
    <ButtonGroup slot-scope="{row,index}" slot="action">
      <Button type="primary" size="small" icon="md-trash" @click="log(row, index)">Del</Button>
      <Button type="error" size="small" icon="md-attach">Add</Button>
    </ButtonGroup>
  </Table>
  <div>
    <Button type="info" @click="exportData(1)">
      <Icon type="ios-download-outline"></Icon>导出表格数据
    </Button>
  </div>
</template>
<script>
const expandRow = {
  name: 'test',
  components: {
    ExampleCode
  },
  template: \`
    <div>
      <Row class="expand-row">
        <Col span="8">
          <span class="expand-key">生命值等级差</span>
          <span class="expand-value">{{ row.life_inc }}</span>
        </Col>
        <Col span="8">
          <span className="expand-key">攻击差</span>
          <span class="expand-value">{{ row.atk_inc }}</span>
        </Col>
        <Col span="8">
          <span className="expand-key">防御差</span>
          <span class="expand-value">{{ row.def_inc }}</span>
        </Col>
      </Row>
    </div>
  \`,
  props: {
    row: Object
  }
}
export default {
  data: () => {
    return {
      cols2: [
        { type: 'selection', width: 60, align: 'center', fixed: 'left' },
        // { type: 'index', minWidth: 60, align: 'center', fixed: 'left' },
        { type: 'expand', width: 50, render: (h, params) => { return h(expandRow, { props: { row: params.row } }) } },
        { title: '等级', minWidth: 100, key: 'lvl' },
        {
          title: '生命',
          minWidth: 100,
          key: 'life',
          sortable: true
        },
        {
          title: '攻击',
          minWidth: 100,
          key: 'attack',
          sortable: true,
          filters: [
            { label: '500以下', value: 1 },
            { label: '500-700', value: 2 },
            { label: '700以上', value: 3 }
          ],
          filterMethod: (value, row) => {
            console.log(value, row)
            if (value === 1) {
              return row.attack < 500
            } else if (value === 2) {
              return row.attack >= 500 && row.attack < 700
            } else if (value === 3) {
              return row.attack >= 700
            }
          }
        },
        { title: '防御', minWidth: 100, key: 'defence' },
        { title: '操作', width: 160, align: 'center', slot: 'action' }
      ],
    }
  }
}
</script>
`
code.page = `
<template>
  <Table
    size="small"
    ref="table3"
    :data="data3"
    :columns="cols3"
    stripe
    :max-height="320"
    border >
    <div slot="loading">
      <Spin>
        <div class="loader">
          <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
          </svg>
        </div>
      </Spin>
    </div>
  </Table>
  <div style="margin-top: 5px">
    <Page :total="40" size="small" show-elevator show-sizer @on-page-size-change="changePageSize" @on-change="changePage" />
  </div>
</template>
<script>
const asyncExpandRow = {
  name: 'asyncExpandRow',
  template: \`
    <div style="margin-left: 50px">
      <Table
        :data="rows"
        :columns="cols"
        size="small"
        ref="table"
        highlight-row
        :height="120"
      ></Table>
    </div>
  \`,
  props: {
    row: Object
  },
  data: () => {
    return {
      rows: [],
      cols: [
        { title: '渠道', minWidth: 160, key: 'channel' },
        {
          title: '注册',
          minWidth: 100,
          key: 'reg',
          sortable: true
        },
        { title: '活跃', minWidth: 100, key: 'act' },
        { title: '充值', minWidth: 100, key: 'recharge' }
      ]
    }
  },
  methods: {
    getData () {
      this.$axios.get('http://test.th6188.com/test/mock?action=table-expand&day=' + this.row.day).then(res => {
        this.rows = res.data.data
      })
    }
  },
  mounted () {
    this.getData()
  }
}
export default {

  data: () => {
    return {
      cols3: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(asyncExpandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        { title: '日期', minWidth: 160, key: 'day' },
        {
          title: '注册',
          minWidth: 100,
          key: 'reg',
          sortable: true
        },
        { title: '活跃', minWidth: 100, key: 'act' },
        { title: '充值', minWidth: 100, key: 'recharge' }
      ],
      data3: []
    }
  }
  methods: {

    mockTableData (page) {
      this.$axios.get('http://test.th6188.com/test/mock?action=table&day=2020-07-30').then(res => {
        this.data3 = res.data.data
      })
    },
    changePage (page) {
      this.mockTableData(page)
    },
    changePageSize (size) {
      console.log(size)
    }
  }
}
</script>
`

export default code
